@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">

                <div class="card">
                    <div class="card-header">
                        默认显示： id firstName lastName
                    </div>
                    <div class="card-body">
                        <user-list :users="{{$users}}"></user-list>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        格式化显示： 带小数点的 id， 大写的 firstName 以及蓝色的 lastName
                    </div>
                    <div class="card-body">
                        <user-list :users="{{$users}}">
                            <template #id="{id}">@{{id}}. </template>
                            <template #name="{first, last}">
                                @{{first.toUpperCase()}} <span class="text-primary">@{{last}}</span>
                            </template>
                        </user-list>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
